import { useEffect, useState } from "react";
import { Avatar, List } from "antd";
import "./index.scss";
import { getBlackList } from "@renderer/api";

interface DataType {
  frendId: string;
  frendName: string;
  description: string;
  avatar: string;
}

const Blacklist = (): JSX.Element => {
  const [list, setList] = useState<DataType[]>([]);
  useEffect(() => {
    const result = getBlackList();
    setList(result);
  }, []);

  return (
    <div className="black-list">
      <div className="title-bar">
        <div className="title">黑名单</div>
      </div>
      <List
        itemLayout="horizontal"
        dataSource={list}
        renderItem={({ frendName, description }) => (
          <List.Item actions={[<a key="list-loadmore-edit">移除</a>]}>
            <List.Item.Meta
              avatar={
                // <Avatar size={32} src={avatar} />
                <Avatar size={32}>{frendName.charAt(0)}</Avatar>
              }
              title={<a>{frendName}</a>}
              description={description}
            />
          </List.Item>
        )}
      />
    </div>
  );
};

export default Blacklist;
